React Redux

Article on Redux

Redux is Basically a State Management Tool Used For The Management Of State The Main Things Which We Used In Redux Are :-

1.Store 2.Reducers 3.Actions 4.Methods

Store:- The Store Is Place Where We Kept Our State.

Reducers:- The Reducer Is a Pure Function Which By Default Takes Two Parameters In It First Is State Which We Want To Update And Second The Action.

Action:- Action Is an Object Which Is The Second Parameter Of The Reducer Function It Is Having The Type Key In Itself.

Methods:- Methods Are The Pre-defined Functions Which Are Provided By The Store To Us By Using The Methods We Can Easily Interact With State Management Process.

Entire Work Flow Of The Redux:- First Of All We Needed A Function Called Reducer Function Which Having Two Parameters in It One Is State And Another One Is Action Object.

function reducer(state,action) {
if(conditional) {
Updated State
}
Esle {}
}

Now Make a Store And Put The Reducer Function In it

import { createStore } from "redux"

const store = createStore(reducer)

The Store Now Provides Some Of The Methods Which Are Given Below:-

1.store.dispatch()
2.store.subscribe()
3 store.getState()

These Methods Are Explain Below:

1 store.dispatch() :-
The Store Dispatch Is Method To Interact With The Action Object Or Dispatching An Action.

2.store.subscribe() :-
This Method is providing The Whole Information if There Is Any change In The Store

3 store.getState() :-
This Method Is Generally Used For Getting The Updated State.

Explanation Of The React -Redux

When We Are Using The React With Redux Then We Use The React-Redux Package. Now We Generally Used The React-Redux Package Because We Having The Store Which Is Called The Central Store Now When We Provide Access To All The Components Of Our Parent Component In React Application Then We Need React-Redux

Work-Flow Of React-Redux

Step 1.:- Importing The Provider From React-Redux By

import { Provider } from "react-redux"

We Use That Provider In The Main Parent Component Which Gives Access Of The Store To The Children Components Presented In It Example Given Below

ReactDOM.render(
  <Provider store={Store}>
    <App />
  </Provider>,
  document.getElementById("root")
)